<template>
  <div class="echartslist">
    <h1 style="font-size:30px;margin-bottom:20px">图表图像</h1>
    <div
      id="main"
      style="width: 600px;height:400px;background:white;margin-bottom:10px"
    ></div>
    <div
      id="main2"
      style="width: 600px;height:400px;background:white;margin-bottom:10px"
    ></div>
    <div
      id="main3"
      style="width: 600px;height:400px;background:white;margin-bottom:10px"
    ></div>
    <div
      id="main4"
      style="width: 600px;height:400px;background:white;margin-bottom:10px"
    ></div>
    <div
      id="main5"
      style="width: 600px;height:400px;background:white;margin-bottom:10px"
    ></div>
    <div
      id="main6"
      style="width: 600px;height:400px;background:white;margin-bottom:10px"
    ></div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  data() {
    return {};
  },
  mounted() {
    this.aa();
    this.bb();
    this.cc();
    this.dd();
    this.ee();
    this.ff();
  },
  methods: {
    // 第一个图表
    aa() {
      var myChart = echarts.init(document.getElementById("main"));

      let option = {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    },

    // 第二个图表
    bb() {
      var myChart = echarts.init(document.getElementById("main2"));
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            detail: {
              formatter: "{value}"
            },
            data: [
              {
                value: 50,
                name: "SCORE"
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },

    // 第三个
    cc() {
      var myChart = echarts.init(document.getElementById("main3"));
      let option = {
        series: [
          {
            type: "gauge",
            anchor: {
              show: true,
              showAbove: true,
              size: 18,
              itemStyle: {
                color: "#FAC858"
              }
            },
            pointer: {
              icon:
                "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 8,
              length: "80%",
              offsetCenter: [0, "8%"]
            },

            progress: {
              show: true,
              overlap: true,
              roundCap: true
            },
            axisLine: {
              roundCap: true
            },
            data: [
              {
                value: 20,
                name: "完成率",
                title: {
                  offsetCenter: ["-40%", "80%"]
                },
                detail: {
                  offsetCenter: ["-40%", "95%"]
                }
              },
              {
                value: 40,
                name: "达标率",
                title: {
                  offsetCenter: ["0%", "80%"]
                },
                detail: {
                  offsetCenter: ["0%", "95%"]
                }
              },
              {
                value: 60,
                name: "优秀率",
                title: {
                  offsetCenter: ["40%", "80%"]
                },
                detail: {
                  offsetCenter: ["40%", "95%"]
                }
              }
            ],
            title: {
              fontSize: 14
            },
            detail: {
              width: 40,
              height: 14,
              fontSize: 14,
              color: "#fff",
              backgroundColor: "auto",
              borderRadius: 3,
              formatter: "{value}%"
            }
          }
        ]
      };

      setInterval(function() {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        option.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
        option.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(option, true);
      }, 2000);
      myChart.setOption(option);
    },

    // 第四个
    dd() {
      var myChart = echarts.init(document.getElementById("main4"));
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },

    ee() {
      var myChart = echarts.init(document.getElementById("main5"));
      let option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "渐变堆叠面积图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(128, 255, 165)"
                },
                {
                  offset: 1,
                  color: "rgba(1, 191, 236)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: "Line 2",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 221, 255)"
                },
                {
                  offset: 1,
                  color: "rgba(77, 119, 255)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
          {
            name: "Line 3",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(55, 162, 255)"
                },
                {
                  offset: 1,
                  color: "rgba(116, 21, 219)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [320, 132, 201, 334, 190, 130, 220]
          },
          {
            name: "Line 4",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 0, 135)"
                },
                {
                  offset: 1,
                  color: "rgba(135, 0, 157)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [220, 402, 231, 134, 190, 230, 120]
          },
          {
            name: "Line 5",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top"
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 191, 0)"
                },
                {
                  offset: 1,
                  color: "rgba(224, 62, 76)"
                }
              ])
            },
            emphasis: {
              focus: "series"
            },
            data: [220, 302, 181, 234, 210, 290, 150]
          }
        ]
      };
      myChart.setOption(option);
    },
    //
    ff() {
      var myChart = echarts.init(document.getElementById("main6"));
      let option = {
        dataset: {
          source: [
            ["score", "amount", "product"],
            [89.3, 58212, "Matcha Latte"],
            [57.1, 78254, "Milk Tea"],
            [74.4, 41032, "Cheese Cocoa"],
            [50.1, 12755, "Cheese Brownie"],
            [89.7, 20145, "Matcha Cocoa"],
            [68.1, 79146, "Tea"],
            [19.6, 91852, "Orange Juice"],
            [10.6, 101852, "Lemon Juice"],
            [32.7, 20112, "Walnut Brownie"]
          ]
        },
        grid: { containLabel: true },
        xAxis: { name: "amount" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 10,
          max: 100,
          text: ["High Score", "Low Score"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#65B581", "#FFCE34", "#FD665F"]
          }
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product"
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
canvas {
  background-color: whitesmoke;
}
</style>
